<template>
  <div v-if="loadTarget" class="loading-mask">
    <div class="loading-content">
      <i class="el-icon-loading"></i>
      <span>{{ tips }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoadingMask",
  props: {
    loadTarget: {
      type: Boolean,
      default: false,
    },
    tips: {
      type: String,
      default: "加载中...",
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-content {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.loading-content i {
  margin-right: 10px;
  font-size: 24px;
  color: $themeColor;
}

.loading-content span {
  font-size: 16px;
  color: #606266;
}
</style>
